<template>
  <div v-if="show" class="fixed inset-0 bg-black/50 flex items-center justify-center z-[60]" @click.self="close">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] flex flex-col">
      <div class="px-6 py-4 border-b flex justify-between items-center">
        <h3 class="text-lg font-bold text-gray-800">答题记录</h3>
        <button @click="close" class="text-gray-500 hover:text-gray-700">✕</button>
      </div>
      
      <div class="flex-1 overflow-y-auto p-6 space-y-4">
        <div v-if="loading" class="text-center py-4 text-gray-500">加载中...</div>
        <div v-else-if="list.length === 0" class="text-center py-4 text-gray-500">暂无答题记录</div>
        
        <div v-else v-for="item in list" :key="item.id" class="border rounded-lg p-4 bg-gray-50">
          <div class="flex justify-between items-center mb-2 text-sm text-gray-500">
            <span>{{ new Date(item.created_at).toLocaleString() }}</span>
          </div>
          <div class="prose max-w-none bg-white p-3 rounded border" v-html="item.content"></div>
        </div>
      </div>
      
      <div class="px-6 py-4 border-t flex justify-end">
        <button class="px-4 py-2 border rounded hover:bg-gray-50" @click="close">关闭</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import api from '../api'

const props = defineProps({
  show: Boolean,
  knowledgeId: Number,
  cardId: String
})

const emit = defineEmits(['close'])
const list = ref([])
const loading = ref(false)

const load = async () => {
  if (!props.knowledgeId || !props.cardId) return
  loading.value = true
  try {
    const res = await api.get(`/api/brush/answers/${props.knowledgeId}/${props.cardId}`)
    list.value = res.data
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}

watch(() => props.show, (val) => {
  if (val) load()
})

const close = () => emit('close')
</script>
